<template>
  <view v-if="props?.product && show" class="product-card">
    <div class="product-detail">
      <view class="product-image-content">
        <image :src="props.product?.image" class="product-image" mode="aspectFill" />
      </view>

      <view class="product-info">
        <text class="truncate product-title">{{ props.product?.storeName }}</text>
        <text class="truncate product-profile">{{ props.product?.storeInfo }}</text>
        <view class="product-meta">
          <text class="product-price">¥{{ props.product?.price }}</text>
          <text class="product-sales">销量 {{ props.product?.totalOrder || 0 }}</text>
        </view>
      </view>
      <div class="like-content">
        <image class="like-icon" src="https://cos.aitshirt.cn/app-icon/%E7%BB%84%20964%402x.png" />
        <text class="like-count">{{ props.product?.totalLikes }}</text>
      </div>
    </div>

    <div class="product-button" v-if="!props.product?.isDel">
      <div class="del" @click="bindDel(1)">删除</div>
      <div class="btns">
        <div class="edit" @click="bindEdit()">编辑作品</div>
        <div class="up" @click="bindUp()" v-if="props.product.isShow == 0">上架作品</div>
        <div class="up" @click="bindDown()" v-if="props.product.isShow == 1">下架作品</div>
      </div>
    </div>
    <div class="product-button" v-else>
      <div class="del">保存期限：30天</div>
      <div class="btns">
        <div class="edit" @click="bindDel(2)">彻底删除</div>
        <div class="up" @click="bindRes()">还原</div>
      </div>
    </div>
  </view>
</template>

<script lang="ts" setup>
import { designerRestoration, designerSWorkDeleted, goodsUpdateOnline } from "@/api/designUser";
import { inject, ref } from 'vue';
import { useRouter } from "uni-mini-router";

const router = useRouter();

const show = ref(true);
const props = defineProps<{
  product: {
    image: string;
    title: string;
    price: number;
    sales: number;
  };
}>();

const openModal = inject('openModal');

const emits = defineEmits(['del']);

const bindRes = () => {
  openModal({
    title: '提示',
    content: `确定还原该作品吗?`,
    callback: ({ type }) => {
      if (type === 'success') {
        designerRestoration({ id: props.product?.id }).then((res) => {
          if (res.status === 200) {
            uni.showToast({
              title: '还原成功',
              icon: 'success',
            });
            emits('del', props.product);
            show.value = false;
          }
        });
      }
    },
  });
};
const bindDel = (type2) => {
  openModal({
    title: '确认删除作品吗？',
    content: `删除作品永久删除`,
    callback: ({ type }) => {
      if (type === 'success') {
        designerSWorkDeleted({ id: props.product?.id, type: type2 }).then((res) => {
          if (res.status === 200) {
            uni.showToast({
              title: '删除成功',
              icon: 'success',
            });
            emits('del', props.product);
            show.value = false;
          }
        });
      }
    },
  });
};
const bindEdit = () => {
  uni.navigateTo({
    url: '/pages/design/index?id=' + props.product?.id,
  });
};
const bindUp = () => {
  router.push({
    path: '/subPage/design/up/up?id=' + props.product?.id,
  });
};

const bindDown = () => {
  const data = {
    // ...props.product,
    id: props.product?.id,
    status: 0,
  };
  goodsUpdateOnline(data).then((res) => {
    console.log(res);
    uni.showToast({
      title: '下架成功',
      icon: 'success',
    });
    router.replace({
      path: '/subPage/design/me/me',
    })
    show.value = false;
  });
};
</script>

<style lang="scss" scoped>
.product-card {
  width: 100%;
  //height: 254rpx;
  background: #ffffff;
  box-shadow: 0rpx 2rpx 4rpx 2rpx rgba(0, 0, 0, 0.08);
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  padding: 28rpx 16rpx 20rpx;

  .product-detail {
    display: flex;

    .product-image-content {
      position: relative;

      .product-image {
        width: 134rpx;
        height: 134rpx;
        background: #ffffff;
      }
    }

    .product-info {
      width: 0;
      display: flex;
      flex-direction: column;
      flex: 1;

      padding: 16rpx;

      .product-title {
        display: block;
        width: 100%;
        height: 32rpx;
        font-weight: 400;
        font-size: 24rpx;
        color: #222222;
        line-height: 32rpx;
      }

      .product-profile {
        font-weight: 400;
        font-size: 24rpx;
        color: #6f6f6f;
        line-height: 32rpx;
        text-align: left;
        margin: 8rpx 0 12rpx;
      }

      .product-meta {
        display: flex;
        align-items: center;
        margin: 8rpx 0 0;
        gap: 8rpx;

        .product-price {
          height: 38rpx;
          font-weight: bold;
          font-size: 28rpx;
          color: #222222;
          text-align: left;
        }

        .product-sales {
          font-weight: 400;
          font-size: 20rpx;
          color: #666666;
        }
      }
    }

    .like-content {
      display: flex;
      flex-direction: column;
      gap: 8rpx;

      .like-icon {
        //position: absolute;
        //top: 16px;
        right: 16rpx;
        width: 32rpx;
        height: 28rpx;
      }

      .like-count {
        font-weight: 400;
        font-size: 24rpx;
        color: #222222;
        line-height: 32rpx;
        text-align: center;
      }
    }
  }

  .product-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 32rpx 0 0;

    .del {
      font-weight: 400;
      font-size: 24rpx;
      color: #222222;
      line-height: 32rpx;
    }

    .btns {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16rpx;

      .edit {
        width: 130rpx;
        height: 48rpx;
        background: #f3f7f8;
        border-radius: 4rpx 4rpx 4rpx 4rpx;
        font-weight: 400;
        font-size: 24rpx;
        color: #222222;
        line-height: 48rpx;
        text-align: center;
      }

      .up {
        width: 130rpx;
        height: 48rpx;
        background: #f25a27;
        border-radius: 4rpx 4rpx 4rpx 4rpx;
        font-weight: 400;
        font-size: 24rpx;
        color: #ffffff;
        line-height: 48rpx;
        text-align: center;
      }
    }
  }
}
</style>
